<template>
  <base-breadcrumb>
    <a-form @submit="handleSubmit" :form="form">
      <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="handleAdd">保存信息</a-button>
        </div>

        <a-tabs default-active-key="1" @change="callback()">
          <a-tab-pane key="1" tab="基本信息">
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="工程承包模式"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['contractModel', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option v-for="d in datas.data.projectContractingModel" :key="d.code" :value="d.code">
                      {{ d.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="是否内部分包"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select
                    disabled
                    @change="isInnerPackage"
                    v-decorator="['innerPackage', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="0">否</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="专业承包公司"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['contractBranch', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="项目名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['projectName', { rules: [{ required: true, message: '项目名称' }] }]"
                    placeholder="输入项目名称"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="项目简称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['projectOmit', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder="输入项目简称"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="项目编号"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['projectNum', { rules: [{ required: true, message: ' ' }] }]"
                    placeholder="项目编号"
                    disabled="true"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="一级地域"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['oneArea', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">中国</a-select-option>
                    <a-select-option value="5">法国</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="二级地域"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['secondArea', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="三级地域"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['threeArea', { rules: [{ required: true, message: ' ' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="四级地域"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['fourArea', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">中国</a-select-option>
                    <a-select-option value="5">法国</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="地理坐标"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['coordinate', { rules: [{ required: true, message: ' ' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="详细地址"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['projectAddress', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder="输入详细地址 "
                    type="textarea"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="一级管辖单位"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['jurisdictionOne', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">中国</a-select-option>
                    <a-select-option value="5">法国</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="二级管辖单位"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['jurisdictionTwo', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">中国</a-select-option>
                    <a-select-option value="5">法国</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="承接名义"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['undertake', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="1">股份公司名义</a-select-option>
                    <a-select-option value="5">法国</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="实施单位(二级)"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['implementationTwo', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="实施单位(三级)"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['implementationThree', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="项目类型"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['projectType', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">房建</a-select-option>
                    <a-select-option value="5">线性基础信息</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="项目业态"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['projectFormat', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">厂房</a-select-option>
                    <a-select-option value="5">超高层</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="结构类型"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['structureType', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">框架结构</a-select-option>
                    <a-select-option value="5">剪力墙结构</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="项目主要程度"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['projectImportance', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">公司重点</a-select-option>
                    <a-select-option value="5">局重点</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="是否为重点项目"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['keyProjects', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="0">否</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="局级大客户"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['bureauCustomer', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">万达</a-select-option>
                    <a-select-option value="5">京东</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="公司级大客户"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['companyCustomer', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">万达</a-select-option>
                    <a-select-option value="5">京东</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="客户级别"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['customerLevel', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">战略客户</a-select-option>
                    <a-select-option value="5">大客户</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="设计单位名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['designUnitName', { rules: [{ required: true, message: '输入设计单位名称' }] }]"
                    name="name"
                    placeholder=" 输入设计单位名称"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="建设单位名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['constructionName', { rules: [{ required: true, message: ' 输入建设单位名称' }] }]"
                    name="name"
                    placeholder="输入建设单位名称 "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="建设单位性质"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select
                    disabled
                    v-decorator="['constructionNature', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">国有企业</a-select-option>
                    <a-select-option value="5">私营企业</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="建设单位信用代码"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled v-decorator="['constructionCode',{ rules: [{ required: true, message: '建设单位社会统一信用代码' }] }]"
                    placeholder=" 建设单位社会统一信用代码"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="审计单位名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['auditName', { rules: [{ required: true, message: '输入审计单位名称 ' }] }]"
                    placeholder=" 审计单位名称"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="监理单位名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['supervisionName', { rules: [{ required: true, message: ' 输入监理单位名称' }] }]"
                    placeholder="输入监理单位名称 "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="勘察单位名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['surveyName', { rules: [{ required: true, message: '输入勘察单位名称' }] }]"
                    placeholder="输入勘察单位名称 "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="咨询单位名称"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['consultingName', { rules: [{ required: true, message: '输入咨询单位名称 ' }] }]"
                    name="name"
                    placeholder="输入咨询单位名称 "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="是否签订合同"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-radio-group>
                    <a-radio :value="1">已签订</a-radio>
                    <a-radio :value="2">未签订</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同建筑面积"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['contractAreaGround', { rules: [{ required: true, message: ' ' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同建筑总面积"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['contractAreaUnderground', { rules: [{ required: true, message: ' ' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="地上层数"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['groundFloor', { rules: [{ required: true, message: '地上层数' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="地下层数"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['undergroundFloor', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同建筑总面积"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['contractTotalArea', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同单体工程数"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['contractSingleProject', { rules: [{ required: true, message: '合同单体工程数' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="最高长单位工程"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['engineeringMeters', { rules: [{ required: true, message: ' ' }] }]"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="维保期时间"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['maintenanceTime', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同开工日期"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-date-picker
                    v-decorator="['contractStartDate', { rules: [{ required: true, message: ' ' }] }]"
                    style=" "
                    placeholder="请选择日期"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同竣工日期"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-date-picker
                    v-decorator="['contractEndDate', { rules: [{ required: true, message: ' ' }] }]"
                    style=" "
                    placeholder="请选择日期"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同工期"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-date-picker
                    disabled
                    v-decorator="['contractDays', { rules: [{ required: true, message: ' ' }] }]"
                    style=" "
                    placeholder="合同工期"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="合同额(万)"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['contractValue', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="自有施工合同额"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    v-decorator="['ownerContractValue', { rules: [{ required: true, message: ' ' }] }]"
                    name="name"
                    placeholder=" "/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item
                  label="备案项目经理"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['projectManager', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="0">1号</a-select-option>
                    <a-select-option value="1">2号</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                  label="项目特点或难点"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }">
                  <BaseInput
                    placeholder="项目特点或难点"
                    disabled
                    v-decorator="['projectFeatures', { rules: [{ required: true, message: ' ' }] }]"
                    type="textarea"/>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                  label="主施工范围"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    placeholder="主施工范围"
                    v-decorator="['mainScope', { rules: [{ required: true, message: ' ' }] }]"
                    type="textarea"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                  label="计划创优级别"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }">
                  <a-select disabled v-decorator="['excellencePlan', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">国家级</a-select-option>
                    <a-select-option value="5">省市级</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                  label="计划观摩级别"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <a-select disabled v-decorator="['observePlan', { rules: [{ required: true, message: ' ' }] }]">
                    <a-select-option value="4">国家级</a-select-option>
                    <a-select-option value="5">省市级</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                  label="计划创优内容"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }">
                  <BaseInput
                    disabled
                    placeholder="计划创优内容"
                    v-decorator="['excellentContent', { rules: [{ required: true, message: ' ' }] }]"
                    type="textarea"/>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                  label="计划观摩内容"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                  <BaseInput
                    disabled
                    placeholder="计划观摩内容"
                    v-decorator="['observeContent', { rules: [{ required: true, message: ' ' }] }]"
                    type="textarea"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="项目设置" force-render>
            <title-name title="项目领导班子人员配置"></title-name>

            <a-table :columns="columns" :data-source="data" bordered>
              <template v-for="col in ['address']" :slot="col" slot-scope="text, record, index">
                <div :key="col">
                  <a-select @change="changeName" v-if="record.editable" style="width: 100%">
                    <a-select-option :value="0">1111</a-select-option>
                    <a-select-option :value="1">2222</a-select-option>
                  </a-select>
                  <template v-else>
                    {{ text }}
                  </template>
                </div>
              </template>
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <span v-if="record.editable">
                    <a @click="() => save(record.key)">保存</a>
                  </span>
                  <span v-else>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                  </span>
                </div>
              </template>
            </a-table>

            <title-name title="其他岗位人员配置"></title-name>
            <a-table :columns="columns" :data-source="data" bordered>
              <template v-for="col in ['address']" :slot="col" slot-scope="text, record, index">
                <div :key="col">
                  <a-select v-if="record.editable" style="width: 100%">
                    <a-select-option value="0">
                      1111
                    </a-select-option>
                  </a-select>
                  <template v-else>
                    {{ text }}
                  </template>
                </div>
              </template>
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <span v-if="record.editable">
                    <a @click="() => save(record.key)">保存</a>
                  </span>
                  <span v-else>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                  </span>
                </div>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="3" tab="附件上传">
            <div class="title-names">附件上传</div>
            <a-upload
              name="file"
              :multiple="true"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :headers="headers"
              v-decorator="['date', { rules: [{ required: true, message: ' ' }] }]"
              @change="handleChange">
              <a-button>
                <a-icon type="upload" style="color: #1890ff" />
                上传文件
              </a-button>
              <div>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
            </a-upload>
            <a-table style="margin-top: 20px" :columns="columns1" :data-source="data1" bordered>
              <template v-for="col in ['annuxName', 'annuxAddress', 'annux']" :slot="col" slot-scope="text, record">
                <div :key="col">
                  <BaseInput
                    v-if="record.editable"
                    style="margin: -5px 0"
                    :value="text"
                    @change="e => handleChange(e.target.value, record.key, col)"/>
                  <template v-else>{{ text }}</template>
                </div>
              </template>
              <span slot="operation" slot-scope="text, record">
                <template>
                  <a @click="handleSub(record)">导出</a>
                  <a-divider type="vertical" />
                  <a @click="handleEdit(record)">删除</a>
                </template>
              </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-form>
  </base-breadcrumb>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import FooterToolBar from '@/components/FooterToolbar'

const columns = [
  {
    title: '序号',
       width: 65,
    dataIndex: 'name',
    width: '25%',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '岗位名称',
    dataIndex: 'age',
    width: '15%',
    scopedSlots: { customRender: 'age' }
  },
  {
    title: '岗位人员姓名',
    dataIndex: 'address',
    width: '40%',
    scopedSlots: { customRender: 'address' }
  },
  {
    title: '员工编号',
    dataIndex: 'no',
    scopedSlots: { customRender: 'no' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
const columns1 = [
  {
    title: '序号',
       width: 65,
    dataIndex: 'name',
    
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '附件名称',
    dataIndex: 'annuxName',
    width: '15%',
    scopedSlots: { customRender: 'age' }
  },
  {
    title: '附件格式',
    dataIndex: 'annux',
    scopedSlots: { customRender: 'annux' }
  },
  {
    title: '附件地址',
    dataIndex: 'annuxAddress',
    width: '40%',
    scopedSlots: { customRender: 'annuxAddress' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const data = []
// 数组创建时候的下标
var numbe = 0

export default {
  name:'a'+Date.now(),

  data() {
    this.cacheData = data.map(item => ({ ...item }))
    return {
      data: [{ name: '111', age: '222', address: '333', no: '44' }],
      data1: [{ name: '1', annuxName: 'img', annuxAddress: '333', annux: '.jpg' }],

      datas: {
        code: 200,
        message: '成功',
        data: {
          projectContractingModel: [
            {
              code: 'sgdwqt1',
              name: '工程总承包（施工单位牵头）1'
            },
            {
              code: 'sgdwqt2',
              name: '工程总承包（施工单位牵头）2'
            },
            {
              code: 'sgdwqt3',
              name: '工程总承包（施工单位牵头）3'
            },
            {
              code: 'sgdwqt4',
              name: '工程总承包（施工单位牵头）4'
            }
          ],
          specializedContractingBranch: [
            {
              code: 'zsglb5',
              name: '装饰管理部'
            },
            {
              code: 'zsglb',
              name: '装饰管理部'
            },
            {
              code: 'zsglb',
              name: '装饰管理部'
            }
          ]
        }
      },

      columns,
      columns1,
      editingKey: '',
      selectedRowKeys: [],

      value: 1, // 是否签订合同

      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        }
      ],

      headers: {
        authorization: 'authorization-text'
      },
      queryParam: {
        projectName: '',
        name: ''
      },
      form: this.$form.createForm(this),
      status: 'all'
    }
  },
  created() {},
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  methods: {
    changeName(item) {
      console.log('changeName触发事件：', item)
    },
    callback(key) {
      console.log('当前选中数据：', key)
    },
    isInnerPackage() {},
    handleAdd() {},
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['error']({
            message: 'Received values of project:',
            description: values
          })
        }
      })
    },
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange1({ fileList }) {
      this.fileList = fileList
    },
    // 上传
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    save(key) {
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter(item => key === item.key)[0]
      const targetCache = newCacheData.filter(item => key === item.key)[0]

      if (target && targetCache) {
        target.editable = false
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
      // if (target) {
      //   target.editable = false;
      //   this.data = newData;
      // }
      this.editingKey = ''
    },
    edit(key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      console.log('编辑获取：', target)
      this.editingKey = key
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    validate() {
      const _this = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('project values', values)

          _this.confirmLoading = true
          // 模拟后端请求 2000 毫秒延迟
          new Promise(resolve => {
            setTimeout(() => resolve(), 2000)
          })
            .then(() => {
              // Do something
              _this.$message.success('保存成功')
              _this.$emit('ok')
            })
            .catch(() => {
              // Do something
            })
            .finally(() => {
              _this.confirmLoading = false
              _this.close()
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper-row {
  padding-left: 55px;
  font-weight: bold;
  letter-spacing: 1px;
}

/deep/ .ant-form-item label {
  font-size: 12px;
}

/deep/ .ant-btn {
  border-radius: 5px;
}

/deep/ .ant-calendar-picker-input.ant-input {
  width: 100%;
}

/deep/ .ant-input {
  /*width: 70%;*/
  border-radius: 5px;
}

/deep/ .ant-calendar-picker {
  width: 100%;
  border-radius: 5px;
}

/deep/ .ant-card.ant-card-bordered {
  border-radius: 5px;
}

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.title-name {
  border-left: 5px solid #1890ff;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 15px;
  height: 20px;
  line-height: 20px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
  padding-left: 80px;
}
</style>
